<template>
<div class="container">
    <!-- 绑定对象 这里button标签能不能被赋予active这一个类名
     取决于isActive这一个变量的真假值 -->
    <button :class="{active: isActive}" @click="toggleActive">点我</button>
    <div v-if="isActive">
        <h2>这里是v-if控制下的</h2>
        <img src="https://img1.baidu.com/it/u=4061946816,2469956104&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=659" />
    </div>
</div>
</template>

<script setup>
import {ref} from 'vue'

const isActive = ref(false)

const toggleActive = () => {
    isActive.value = !isActive.value;
}
</script>

<style scoped>
.container{
    background-color: rgb(177, 177, 177);
    border-radius: 15px;
    padding:10px;
    margin:10px;
}

.active{
    background-color: brown;
    padding:20px;
    border-radius: 20px;
}
</style>